<template>
    <div class="tr">
        <div class="tr-top">
            <div class="left">
                <el-button @click="dialogVisible = true;addEdit=false">新增</el-button>
            </div>
            <div class="right">
                <div class="itm"> <el-input clearable v-model="tableObjData.name__like" style="width: 240px"
                        placeholder="输入名称" /></div>
                <div class="itm"><el-button @click="getEv(true)">查询</el-button></div>
            </div>
        </div>
        <div class="table-content">
            <el-collapse v-model="activeNames" accordion @change="handleChangeCollapseEv">
                <el-collapse-item v-for="(title, key) in chartComponentName" :key="key" title="面板图" :name="key">
                    <template #title>
                        <div style="padding-left: 10px;">{{ title }}</div>
                    </template>
                    <div>
                        <el-table empty-text="暂无数据" border height="100%" :data="tableListData">
                            <el-table-column align="center" type="index" label="#" width="50" />
                            <el-table-column show-overflow-tooltip align="center" header-align="center" prop="name"
                            label="名称" width="250" />
                            <el-table-column show-overflow-tooltip align="center" header-align="center" prop="rem"
                                label="备注" width="250" />
                            <el-table-column align="center" header-align="center" label="操作" width="180">
                                <template #default="scope">
                                    <!-- <el-button  link type="primary" size="small">
                                        预览
                                    </el-button> -->
                                    <el-button @click="editButtonEv(scope.row.id)" link type="primary" size="small">
                                        编辑
                                    </el-button>
                                    <el-button :disabled="scope.row.type == 1 ? true : false" link
                                        @click="deleteRowEv(scope.row.id)" type="primary" size="small">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <pagination v-show="tableObjData.total > 0" :total="tableObjData.total" v-model:page="tableObjData.page"
                            v-model:limit="tableObjData.pageSize" @pagination="getEv(true)" />
                    </div>
                </el-collapse-item>

            </el-collapse>
        </div>
        <el-dialog draggable v-model="dialogVisible" :title="addEdit==false?'新增'+ '数据':'编辑' + '数据'" width="400" :before-close="handleClose">
            <div>
                <div><el-select v-model="addEditData.componentName" placeholder="请选择组件模板" size="large"
                        style="width: 100%">
                        <el-option v-for="(value, key) in chartComponentName" :key="key" :label="value" :value="key" />
                    </el-select></div>
                <div style="padding-top: 10px;"><el-input style="background-color: white;" disabled
                        v-model="addEditData.poolName" placeholder="请选择数据库配置" class="input-with-select">
                        <template #append>
                            <el-button @click="serachPoolEv()" :icon="Search" />
                        </template>
                    </el-input></div>
                <div style="padding-top: 10px;"><el-input v-model="addEditData.dataName" style="width:100%"
                        placeholder="数据名称" clearable /></div>
                <div style="padding-top: 10px;"><el-input v-model="addEditData.rem" style="width: 100%" :rows="2"
                        type="textarea" placeholder="备注" /></div>
                <div style="padding-top: 10px;"><el-input v-model="addEditData.sql" style="width: 100%" :rows="8"
                        type="textarea" placeholder="数据源" /></div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addEditSuerButtonEv">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 获取连接池 -->
        <el-dialog v-model="dialogVisiblePool" title="Tips" width="50%" :before-close="handleClose">
            <div style="height: 300px">
                <componentsDictList @dbRowBasicList="dbRowBasicList" :basicList="pollList" />
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import {
    Search
} from '@element-plus/icons-vue'
import componentsDictList from '@/views/setting/basic/dbpool/components/index.vue'
import { ChartDataListGet, ChartDataListPost, ChartDataPkDelete,ChartDataPkGet,ChartDataPkPut } from '@/api/chart/index.js'
import { pollList as pollListData } from '@/utils/chartInitData.js'
import { chartComponentName, chartComponentInitData } from '@/utils/chart.js'
import { ref, reactive, onMounted, onActivated } from 'vue'
import { loadingStore } from '@/stores/index.js'
const loading = loadingStore()
const activeNames = ref('panel')
const rowId = ref('')
const pollList = reactive(pollListData)
const dialogVisible = ref(false)
const dialogVisiblePool = ref(false)
const addEdit = ref(false)
const addEditData = reactive({
    componentName: '',
    poolName: '',
    pool: '',
    dataName: '',
    rem: '',
    sql: ''
})

const tableObjData = reactive({
    name__like: '',
    page: 1,
    total: 0,
    has_next: false,
    has_prev: false,
    pages: 0,
    pageSize: 20
})

const tableListData = ref([

])

onMounted(() => {
    getEv(false)
})
onActivated(() => {

})

const dbRowBasicList = (val) => {
    addEditData.pool = val.id
    addEditData.poolName = val.value
    dialogVisiblePool.value = false
}
// 点击选择连接池
const serachPoolEv = () => {

    dialogVisiblePool.value = true
}
// 查询数据
const getEv = async (msg) => {
    loading.loading = true
    tableObjData.componentName = activeNames.value
    try {
        let arr_data = await ChartDataListGet(tableObjData)
        if (arr_data.status != 200) {
            return
        }
        if (msg == true) {
            ElMessage.success('查询成功')
        }
        tableListData.value = arr_data.data.result.data
        tableObjData.total = arr_data.data.result.total
        tableObjData.has_next = arr_data.data.result.has_next
        tableObjData.has_prev = arr_data.data.result.has_prev
        tableObjData.pages = arr_data.data.result.pages
        tableObjData.pageSize = arr_data.data.result.pageSize

    } catch (error) {
        ElMessage.error('查询接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

const handleChangeCollapseEv = async (val) => {
    console.log(val)
    tableObjData.pages = 1
    tableObjData.componentName = val
    tableObjData.name__like = ''
    await getEv(false)
}

// 删除数据
const deleteRowEv = async (rowId) => {
    const message = await ElMessageBox.confirm('确定删除此数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning ',
        confirmButtonClass: 'confirm-suer',
        cancelButtonClass: 'confirm-cancel',
        roundButton: true,
    }).catch((err) => err)
    if (message === 'confirm') {
        loading.loading = true
        try {
            let arr_data = await ChartDataPkDelete(rowId)
            if (arr_data.status != 200) {
                return
            }
            await getEv(false)
            ElMessage.success('删除成功')
        } catch (error) {
            ElMessage.error('删除接口请求失败' + error)
        } finally {
            loading.loading = false
        }
    }
}

// 点击编辑按钮
const editButtonEv = async(val) => {
    rowId.value = val
    dialogVisible.value = true
    addEdit.value = true
    loading.loading = true
    try {
        let arr_data = await ChartDataPkGet(val)
        if (arr_data.status != 200) {
            return
        }
        addEditData.componentName = arr_data.data.result.componentName
        addEditData.poolName = arr_data.data.result.poolName
        addEditData.pool = arr_data.data.result.pool
        addEditData.dataName = arr_data.data.result.dataName
        addEditData.rem = arr_data.data.result.rem
        addEditData.sql = arr_data.data.result.sql
 

    } catch (error) {
        ElMessage.error('查询接口请求失败' + error)
    } finally {
        loading.loading = false
    }

}

// 关闭事件
const handleClose = (done) => {
    done()
}

const addEditSuerButtonEv = async()=>{
    if (addEdit.value==false) {
        await addChartEv()
    } else {
        await editChartEv()
    }

}

// 新增数据
const addChartEv = async () => {
    loading.loading = true
    try {
        let arr_data = await ChartDataListPost(addEditData)
        if (arr_data.status != 200) {
            return
        }
        dialogVisible.value = false
        await getEv(false)
        ElMessage.success('新增成功')
    } catch (error) {
        ElMessage.error('新增接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}
// 修改数据
const editChartEv = async () => {
    loading.loading = true
    try {
        let arr_data = await ChartDataPkPut(addEditData,rowId.value)
        if (arr_data.status != 200) {
            return
        }
        dialogVisible.value = false
        await getEv(false)
        ElMessage.success('修改成功')
    } catch (error) {
        ElMessage.error('修改接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

</script>

<style lang='less' scoped>
.tr {
    height: 100%;
}

.tr-top {
    height: var(--tr-top-height);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
        display: flex;
        align-items: center;
    }

    .right {
        display: flex;
        align-items: center;
    }

    .itm {
        padding-right: 4px;
        box-sizing: border-box;
    }
}

.table-content {
    height: calc(100% - var(--tr-top-height) - var(--tr-page-height));
}
</style>